<template>
  <div class="navigation-bar">
    <van-nav-bar left-arrow :title="title" v-bind="$attrs" v-on="$listeners">
      <template #right>
        <van-icon name="question-o" size="20" v-if="isTester" @click="goToDocument" />
        <van-icon name="bars" size="20" v-if="isDocument" @click="showNavigationPane" />
      </template>
    </van-nav-bar>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator';
import { type Route } from 'vue-router'
import { testerList } from '@/config/tester';

@Component({
  name: 'navigation-bar'
})
export default class NavigationBar extends Vue {
  private title = '';
  private get tester() {
    return this.$store.state.tester;
  }
  private get isTester() {
    return this.$route.name === 'Tester';
  }
  private get isDocument() {
    return this.$route.name === 'Document';
  }

  @Watch('$route')
  onRouteChange(to: Route) {
    const { meta, name } = to;
    // 仪器页面通过 key 字段判断标题
    if (name === 'Tester') {
      this.onTesterChange();
      return;
    }
    if (meta && meta.title) {
      this.title = meta.title;
    }
  }

  @Watch('tester')
  onTesterChange() {
    const item = testerList.find(item => item.key === this.tester);
    if (item) {
      this.title = item.title;
    }
  }

  goToDocument() {
    this.$router.push({
      name: 'Document'
    })
  }

  showNavigationPane() {
    this.$store.dispatch('setShowPane', !this.$store.state.showPane);
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar {
  background: transparent;
}

::v-deep .van-hairline--bottom::after {
  border-bottom: none;
}
</style>
